<template>

  <el-main>

    <span>支付截止日期:</span>
    <el-date-picker
      v-model="seachCheckBath.startTime"
      type="date"
      value-format="yyyyMMdd"
      placeholder="选择日期">
    </el-date-picker>至
    <el-date-picker
      v-model="seachCheckBath.endTime"
      type="date"
      value-format="yyyyMMdd"
      placeholder="选择日期">
    </el-date-picker>

    <el-button type="primary" @click="list">查询</el-button>



    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="batchNo"
        label="对账批次">
      </el-table-column>
      <el-table-column
        prop="billDay"
        label="账单日">
      </el-table-column>
      <el-table-column
        label="账单类型">
        <template slot-scope="scope">
          <span v-if="scope.row.billType=='1'">代付</span>
          <span v-if="scope.row.billType=='2'">快捷</span>
          <span v-if="scope.row.billType=='3'">微信</span>
          <span v-if="scope.row.billType=='4'">支付宝</span>
        </template>
      </el-table-column>
      <el-table-column
        label="渠道名称">
        <span>拉卡拉</span>
      </el-table-column>
      <el-table-column
        prop="orderCount"
        label="渠道对账文件交易数量">
      </el-table-column>
      <el-table-column
        prop="checkCount"
        label="系统交易流水数量">
      </el-table-column>
      <el-table-column
        prop="diffCount"
        label="差错账数量">
      </el-table-column>
      <el-table-column
        prop="checkDay"
        label="对账日期">
      </el-table-column>
      <el-table-column
        prop="createType"
        label="生成方式">
        <template slot-scope="scope">
          <span v-if="scope.row.createType=='1'">自动</span>
          <span v-if="scope.row.createType=='2'">手动</span>
        </template>
      </el-table-column>
      <el-table-column
        label="是否完成对账">
        <template slot-scope="scope">
          <span v-if="scope.row.completeState=='1'">完成</span>
          <span v-if="scope.row.completeState=='2'">未完成</span>
          <span v-if="scope.row.completeState=='3'">取消</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="confirmDate"
        label="对账确认时间">
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="100">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="lookBatchDetail(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page=seachCheckBath.pageNum
      :page-sizes="[1, 3, 5, 10]"
      :page-size=seachCheckBath.pageSize
      layout="total, sizes, prev, pager, next, jumper"
      :total=total>
    </el-pagination>

  </el-main>

</template>

<script>

import {listPayOrders} from "@/api/finance/checkforbatch"

export default {
  data() {
    return {
      tableData: [],
      seachCheckBath:{
        pageNum:1,
        pageSize:10
      },
      total:null
    }
  },
  methods:{
    list(){
      listPayOrders(this.seachCheckBath).then(res=>{
        console.log(res);
        this.tableData = res.msgData.records;
        this.seachCheckBath.pageNum = res.msgData.current;
        this.seachCheckBath.pageSize = res.msgData.size;
        this.total = res.msgData.total;
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.seachCheckBath.pageSize = val;
      this.seachCheckBath.pageNum = 1;
      this.list()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.seachCheckBath.pageNum = val;
      this.list();
    },
    //查看详细信息
    lookBatchDetail(row){
      const id = row.batchNo
      console.log(id)
      this.$router.push("/finance/checkforthedetail/index/"+id );
    }
  },
  created() {
    this.list();
  }
}
</script>

<style scoped>

</style>
